/**
 * 生日歌音频对象
 * @type {HTMLAudioElement}
 */
const birthdaySong = new Audio('../public/birthday.mp3');

/**
 * 插入并点亮蜡烛
 */
function insertAndLightCandles() {
    const candles = document.querySelectorAll('.candle');
    const flames = document.querySelectorAll('.flame');
    const glows = document.querySelectorAll('.glow');

    candles.forEach((candle, index) => {
        // 先插入蜡烛
        setTimeout(() => {
            // 插入动画
            candle.style.opacity = '1';
            candle.style.transform = 'translateY(0)';
            
            // 插入时的弹跳效果
            setTimeout(() => {
                candle.style.transform = 'translateY(-5px)';
                setTimeout(() => {
                    candle.style.transform = 'translateY(0)';
                    
                    // 插入完成后点亮蜡烛
                    setTimeout(() => {
                        // 点亮火焰
                        flames[index].style.opacity = '1';
                        glows[index].style.opacity = '1';
                        
                        // 添加摇曳动画
                        flames[index].style.animation = 'flicker 2s ease-in-out infinite';
                        glows[index].style.animation = 'flicker 2s ease-in-out infinite';
                        
                        // 点亮时的缩放效果
                        candle.style.transform = 'scale(1.1)';
                        setTimeout(() => {
                            candle.style.transform = 'scale(1)';
                        }, 200);
                    }, 300);
                }, 100);
            }, 300);
        }, index * 1300); // 每隔0.8秒插入一根蜡烛
    });
}

/**
 * 移除并熄灭蜡烛
 */
function removeAndExtinguishCandles() {
    const candles = document.querySelectorAll('.candle');
    const flames = document.querySelectorAll('.flame');
    const glows = document.querySelectorAll('.glow');

    candles.forEach((candle, index) => {
        setTimeout(() => {
            // 先熄灭火焰
            flames[index].style.opacity = '0';
            glows[index].style.opacity = '0';
            flames[index].style.animation = 'none';
            glows[index].style.animation = 'none';
            
            // 然后移除蜡烛
            setTimeout(() => {
                candle.style.transform = 'translateY(-50px)';
                candle.style.opacity = '0';
            }, 300);
        }, index * 1000);
    });
}

/**
 * 创建星星
 */
function createStar() {
    const star = document.createElement('div');
    const size = Math.random() * 2 + 1;
    
    star.style.cssText = `
        position: absolute;
        width: ${size}px;
        height: ${size}px;
        background: #fff;
        border-radius: 50%;
        left: ${Math.random() * 100}%;
        top: ${Math.random() * 100}%;
        opacity: ${Math.random()};
        animation: twinkle ${Math.random() * 3 + 2}s ease-in-out infinite;
    `;
    
    document.querySelector('.stars').appendChild(star);
}

/**
 * 创建云
 */
function createCloud() {
    const cloud = document.createElement('div');
    const top = Math.random() * 60 + 20;
    
    cloud.style.cssText = `
        position: absolute;
        width: 150px;
        height: 60px;
        background: radial-gradient(
            circle at center,
            rgba(255, 255, 255, 0.2) 0%,
            rgba(255, 255, 255, 0.1) 50%,
            transparent 100%
        );
        border-radius: 30px;
        top: ${top}%;
        left: -150px;
        filter: blur(5px);
        animation: floatCloud ${Math.random() * 10 + 20}s linear infinite;
    `;
    
    document.querySelector('.clouds').appendChild(cloud);
}

// 初始化背景
document.addEventListener('DOMContentLoaded', () => {
    // 创建初始星星
    for (let i = 0; i < 100; i++) {
        createStar();
    }
    
    // 定期创建新的星星
    setInterval(() => {
        const stars = document.querySelector('.stars').children;
        if (stars.length < 150) {
            createStar();
        }
    }, 1000);
    
    // 音乐播放时的效果
    const musicBtn = document.querySelector('.music-btn');
    let isPlaying = false;
    
    musicBtn.addEventListener('click', () => {
        if (!isPlaying) {
            birthdaySong.play();
            musicBtn.querySelector('.btn-text').textContent = '暂停音乐';
            document.body.classList.add('music-playing');
            
            // 依次插入并点亮蜡烛
            insertAndLightCandles();
            
            // 创建云 - 控制数量
            let cloudCount = 0;
            const maxClouds = 5; // 最大云的数量
            
            const cloudInterval = setInterval(() => {
                if (document.body.classList.contains('music-playing')) {
                    const clouds = document.querySelector('.clouds');
                    
                    // 检查当前云的数量
                    if (clouds.children.length < maxClouds) {
                        createCloud();
                        cloudCount++;
                    }
                    
                    // 清理已经移出视图的云
                    Array.from(clouds.children).forEach(cloud => {
                        const rect = cloud.getBoundingClientRect();
                        if (rect.left > window.innerWidth) {
                            cloud.remove();
                        }
                    });
                }
            }, 3000);
            
            // 保存interval ID以便后续清除
            window.cloudInterval = cloudInterval;
        } else {
            birthdaySong.pause();
            musicBtn.querySelector('.btn-text').textContent = '播放音乐';
            document.body.classList.remove('music-playing');
            
            // 清除云的生成
            clearInterval(window.cloudInterval);
            
            // 依次移除并熄灭蜡烛
            removeAndExtinguishCandles();
        }
        isPlaying = !isPlaying;
    });

    // 添加翻转功能
    const card = document.querySelector('.birthday-card');
    const flipBtns = document.querySelectorAll('.flip-btn');
    
    flipBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            card.classList.toggle('flipped');
        });
    });

    // 添加触摸支持
    let touchStartX = 0;
    let touchEndX = 0;
    
    card.addEventListener('touchstart', e => {
        touchStartX = e.changedTouches[0].screenX;
    });
    
    card.addEventListener('touchend', e => {
        touchEndX = e.changedTouches[0].screenX;
        const swipeDistance = touchEndX - touchStartX;
        
        if (Math.abs(swipeDistance) > 50) { // 最小滑动距离
            card.classList.toggle('flipped');
        }
    });
});

// 更新动画样式
const style = document.createElement('style');
style.textContent = `
    @keyframes twinkle {
        0%, 100% { opacity: 0.3; }
        50% { opacity: 1; }
    }
    
    @keyframes floatCloud {
        from { transform: translateX(-150px); }
        to { transform: translateX(calc(100vw + 150px)); }
    }

    @keyframes flicker {
        0%, 100% {
            transform: scale(1) rotate(-4deg);
            filter: brightness(1);
        }
        25% {
            transform: scale(1.1) rotate(4deg);
            filter: brightness(1.1);
        }
        50% {
            transform: scale(0.9) rotate(-2deg);
            filter: brightness(0.9);
        }
        75% {
            transform: scale(1.2) rotate(2deg);
            filter: brightness(1.2);
        }
    }
`;
document.head.appendChild(style); 